<template>
    <div class="body">
        <div class="newsDetails">
            <h3>{{newDetails.title}}</h3>
            <div><span class="left">编辑：{{newDetails.author}}</span><span class="right">{{newDetails.releaseTime}}</span></div>
            <img v-lazy.container="`http://localhost:3000/${newDetails.img.filename}`"/>
            <p v-html="newDetails.content"></p>
            <button @click="fww">haha</button>
        </div>
        <div class="share">
            <p>立即分享</p>
            <ul>
                <li><i class="iconfont icon-weixin"></i>微信</li>
                <li><i class="iconfont icon-pengyouquan"></i>微信朋友圈</li>
                <li><i class="iconfont icon-yijianxiang"></i>邮箱</li>
                <li><i class="iconfont icon-gengduo"></i>更多</li>
            </ul>
        </div>
        <div class="commen">
            <p>热门评论</p>
            <ul>
                <li v-for="commenList in commenList">
                    <div class="left"><img src="src/images/face.jpg"/></div>
                    <div class="left">
                        <span>{{commenList.appraiser}}</span>
                        <p v-html="commenList.content"></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex';
    export default {
        data(){
            return{

            }
        },
        computed: {
            ...mapGetters(['newDetails','commenList']),
        },
        methods:{
            ...mapActions(['getNewsDetails','getCommenList']),
            fww(){
                console.log(this.commenList);
            }
        },
        created(){
            this.getNewsDetails(this.$route.params.id);
            this.getCommenList({articleId:this.$route.params.id});
        }
    }
</script>
<style>
    .body{background:#eee}
    .newsDetails,.share,.commen{background:#fff}
    li{list-style:none;font-size:13px;}
    ul{margin:0;padding:0}
    .newsDetails{font-size:13px;padding:5px;}
    .newsDetails h3{font-size:16px;margin:0}
    .newsDetails div{padding:5px 0;margin-bottom:5px;border-bottom:1px dashed #999;overflow:hidden}
    .newsDetails img{width:100%}
    .left{float:left;}
    .right{float:right;color:#666}
    .share,.commen{border:1px solid #ccc;margin:15px 0;border-radius:3px}
    .share p,.commen p{color:red;border-bottom:1px solid #ccc;margin:0;font-size:12px;height:22px;line-height:22px}
    .share ul{overflow:hidden}
    .share li{float:left;width:25%;overflow:hidden;text-align:center;height:50px}
    .share li i{display:block;margin-top:8px;}
    .commen li{width:100%;overflow:hidden}
    .commen img{width:50px;height:50px;border-radius:50%}
</style>